const bt = document.getElementById('showSelect');
const div = document.querySelector('.select');

bt.addEventListener('click', function (event) {
    div.style.display = 'block';
    event.stopPropagation();//阻止冒泡
});

document.addEventListener('click', function () {
    div.style.display = 'none';//隐藏
});

div.addEventListener('click', function (event) {
    event.stopPropagation();//阻止冒泡
});

var i = 1;
var added = document.getElementById('add');
var ID;

function moveUpper() {
    var currentObj = event.currentTarget;
    var upper = currentObj.parentNode.parentNode
    let upperclass = upper.className
    let temp = upper.innerHTML
    let id = upper.id
    // console.log(id);
    if (id - 1 <= 0)
        return;
    var bottomObj = document.getElementById('' + (id - 1));
    upper.innerHTML = bottomObj.innerHTML
    bottomObj.innerHTML = temp
    upper.className = bottomObj.className
    bottomObj.className = upperclass
    console.log("成功！")
}

function moveDown() {
    var currentObj = event.currentTarget;
    var upper = currentObj.parentNode.parentNode
    let upperclass = upper.className
    let temp = upper.innerHTML
    let id = Number(upper.id)
    console.log(id);
    if (id + 1 > i)
        return;
    var bottomObj = document.getElementById('' + (id + 1));
    upper.innerHTML = bottomObj.innerHTML
    bottomObj.innerHTML = temp
    upper.className = bottomObj.className
    bottomObj.className = upperclass
    console.log("成功！")
}

function GetID(obj) {
    ID = obj.getAttribute("id");
    // console.log(ID);
}

function del(ID) {
    document.getElementById(ID).remove();
    document.getElementById(+ID + 'p').remove();
    i--;
}

function addSingle() {
    var singleChoice = '<div class="single" id="' + i + '" name = "' + i + '" onclick="GetID(this)">\n' +
        '    <div class="singleSel">' +
        '       <p>&nbsp;&nbsp;&nbsp;单选题</p>\n' +
        '       <label><div><input type="radio" name = ' + i + '>选项一</div></label>\n' +
        '       <label><div><input type="radio" name = ' + i + '>选项二</div></label>\n' +
        '    </div>' +
        '    <div class="singleP" id="location">\n' +
        '        <p onclick="moveUpper()" >上移</p>\n' +
        '        <p onclick="moveDown()">下移 </p>\n' +
        '        <p onclick="addSingle()">复用</p>\n' +
        '        <p onclick="del(ID)">删除</p>\n' +
        '    </div>\n' +
        '</div>';
    var Q = '<p id="' + i + 'p" style="    float: left;\n' +
        '    position: relative;\n' +
        '    z-index: 10;\n' +
        '    left: 4%;">&nbsp;Q' + i + '&nbsp;</p>';
    added.innerHTML += Q;
    added.innerHTML += singleChoice;
    i++;
}

function addMultiple() {
    var multipleChoice = '<div class="multiple" id="' + i + '" name = "' + i + '" onclick="GetID(this)">\n' +
        '    <div class="singleSel">\n' +
        '       <p>&nbsp;&nbsp;&nbsp;多选题</p>\n' +
        '       <label><div><input type="checkbox" name=' + i + '>选项一</div></label>\n' +
        '       <label><div><input type="checkbox" name=' + i + '>选项二</div></label>\n' +
        '       <label><div><input type="checkbox" name=' + i + '>选项三</div></label>\n' +
        '       <label><div><input type="checkbox" name=' + i + '>选项四</div></label>\n' +
        '    </div>' +
        '    <div class="singleP">\n' +
        '        <p onclick="moveUpper()">上移</p>\n' +
        '        <p onclick="moveDown()">下移</p>\n' +
        '        <p onclick="addMultiple()">复用</p>\n' +
        '        <p onclick="del(ID)">删除</p>\n' +
        '    </div>\n' +
        '</div>';
    var Q = '<p id="' + i + 'p" style="    float: left;\n' +
        '    position: relative;\n' +
        '    z-index: 10;\n' +
        '    left: 4%;">&nbsp;Q' + i + '&nbsp;</p>';
    added.innerHTML += Q;
    added.innerHTML += multipleChoice;
    i++;
}

function addText() {
    var textChoice = '<div class="text" id="' + i + '" name = "' + i + '" onclick="GetID(this)">\n' +
        '    <p class="TextTitle singleSel">&nbsp;&nbsp;&nbsp;文本题</p>\n' +
        '    <label><div class="check"><input type="checkbox">此题是否必填</div></label>\n' +
        '    <input type="text" class="textContent">\n' +
        '    <div class="singleP">\n' +
        '        <p onclick="moveUpper()">上移</p>\n' +
        '        <p onclick="moveDown()">下移</p>\n' +
        '        <p onclick="addText()">复用</p>\n' +
        '        <p onclick="del(ID)">删除</p>\n' +
        '    </div>\n' +
        '</div>';
    var Q = '<p id="' + i + 'p" style="    float: left;\n' +
        '    position: relative;\n' +
        '    z-index: 10;\n' +
        '    left: 4%;">&nbsp;Q' + i + '&nbsp;</p>';
    added.innerHTML += Q;
    added.innerHTML += textChoice;
    i++;
}

//展示删除提示框
function showDelete() {
    var endDateValue = document.getElementById("endDateValue");
    var endDate = document.getElementById("endDate");
    endDate.innerHTML = "（此问卷截止日期为";
    endDate.innerHTML += (endDateValue.value + ")");
    var overlay = document.getElementById("saveQuestionList");
    overlay.style.display = "block";
    var back = document.getElementById("saveQuestionBc");
    back.style.display = "block";
}

//隐藏提示框
function hideDelete() {
    var overlay = document.getElementById("saveQuestionList");
    overlay.style.display = "none";
    var back = document.getElementById("saveQuestionList");
    back.style.display = "none";
}
